<template>
	<view class="" >

		<!-- 普通瀑布流 -->
		<view class="community-list" v-if="type == 'waterfall'" style="background-color: #FFF;">
			<u-time-line>
				<u-time-line-item v-for="(item, index) in list" :key="index">
					
					<template v-slot:content >
						<view class="community-list--item bg-white">
							<view class="u-order-desc ">
								<text style="font-size: 50rpx; color:  #000000;font-weight:bold;display: inline-block;">{{item.slogan_month}}</text>
								<text style="font-weight:bold; color:#000000 ;vertical-align: text-bottom;display: inline-block;">{{item.slogan_year}}</text>
							</view>
							<view v-for="(items,i) in item.data" :key="i" @tap="todetail(items.goods_id)"  style="margin-bottom: 40rpx;">
								<view class="community-img">
									<u-lazy-load threshold="0" border-radius="10" :image="items.image" :index="index" ></u-lazy-load>
								</view>
								<view class="community-info">
									
									<view class="community-title line-2">{{items.goods_name}}</view>
								</view>
							</view>	
						</view>
					</template>
					
					
				</u-time-line-item>
			</u-time-line>
		</view>
		<!-- 用户作品瀑布流 -->
		<view class="community-list" v-if="type == 'works'">
			<router-link v-for="(item, index) in list" :key="index" class=""
				:to="'/bundle_b/pages/community_detail/community_detail?id=' + item.id">
				<view class="community-list--item bg-white m-t-20">
					<view class="community-img">
						<!-- 审核 Start -->
						<view class="works flex row-center " v-if="item.status === 0 || item.status === 2">
							<view class="text-center nr white">
								<view>{{ item.status_desc }}</view>
								<view class="m-t-10">{{ item.audit_remark_desc }}</view>
							</view>
						</view>
						<!-- 审核 End -->
						<u-lazy-load threshold="0" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					</view>
					<view class="community-info">
						<view class="community-title line-2">{{item.content}}</view>
						<view class="m-t-20 flex">
							<view class="user-name flex-1 line-2">{{ item.create_time }}</view>
							<view class="likes">
								<image
									:src="item.is_like?'/static/images/icon_collection_s.png':'/static/images/icon_likes.png'">
								</image>
								<text class="xs muted m-l-6">{{ item.like }}</text>
							</view>
						</view>
					</view>
				</view>
			</router-link>
		</view>

		<!-- 首页list -->
		<view class="community-list flex" v-if="type == 'index'">
			<router-link v-for="(item, index) in list" :key="index" class="community-list--item bg-white m-r-20"
				:to="'/bundle_b/pages/community_detail/community_detail?id=' + item.id">
				<view class="community-index">
					<view class="wrap white sm p-l-10">
						<view class="index-title line-1">{{ item.content }}</view>
						<view class="flex m-t-10">
							<u-lazy-load threshold="0" border-radius="10" :image="item.image"
								:index="index"></u-lazy-load>
							<view class="index-name line-1 m-l-6">
								{{ item.nickname }}
							</view>
						</view>
					</view>
					<u-image width="240" height="240" :src="item.image" borderRadius="14"></u-image>
				</view>
			</router-link>

		</view>
	</view>


</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			// 两行时有效
			width: {
				type: String,
				default: '347rpx'
			},
			type: {
				type: String
			}
		},
		data() {
			return {

			};
		},
		methods: {
			todetail(id) {
				uni.navigateTo({
					url: '/bundle_b/pages/community_detail/community_detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.community-list {

		// height: 100%;
		&--item {
			border-radius: 14rpx;

			// 个人中心审核作品
			.community-img {
				// padding: 0  20rpx ;
				width: 700rpx;
				position: relative;

				.works {
					
					width: 90%;
					height: 100%;
					z-index: 10;
					border-radius: 14rpx;
					background-color: rgba(0, 0, 0, 0.4);
					position: absolute;
				}
			}

			.community-index {
				width: 240rpx;
				height: auto;
				position: relative;

				.wrap {
					padding: 0 50rpx;
					width: 100%;
					height: 100%;
					z-index: 10;
					border-radius: 14rpx;
					background-color: rgba(0, 0, 0, 0.4);
					position: absolute;
					padding-top: 140rpx;

					.index-title {
						width: 210rpx;

					}

					.index-name {
						width: 160rpx;

					}
				}
			}

			// 文字
			.community-info {
				padding: 0 30rpx;

				.community-title {
					font-size: 28rpx;
					margin-top: 10rpx;
					line-height: 40rpx;
					color: $-color-normal;
				}

				.user-name {
					color: $-color-muted;
					font-size: 24rpx;
					margin: 0 10rpx;
				}

				.likes {
					image {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}
			}
		}
		
	}
	

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 16rpx;
		padding-left: 20rpx;
	}

</style>
